import React from 'react'
import {useSelector,useDispatch} from "react-redux"
import { increment,decrement  } from '@/app/slice/countSlice'
export default function Count() {

   /* 
    使用react-redux提供的useSelector这个hook 可以快速的拿到redux中的数据
    useSelector接受一个回调函数作为参数,回调函数接受redux的数据作为参数
    回调函数的返回值就是useSelector的返回值
  */

  const count = useSelector((state)=>{
  // console.log(state);
     return state.count.count
  })

  const dispatch = useDispatch();

  // console.log(count);
  return (
    <div>
      <h1>Count:{count}</h1>
      <button onClick={() => {
        dispatch(increment(5))
      }}>累加count</button>
      <button onClick={() => {
        dispatch(decrement(10))
      }}>累减count</button>

    </div>
  )
}
